<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>帧动画图层</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>
<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="changeVisible()">显示/隐藏</button>
    <button onclick="stopAnimate()">停止</button>
    <button onclick="starAnimate()">开始</button>
    <button onclick="destroyAnimate()">销毁</button>
</div>
</body>
</html>

<script>
    function changeVisible(){
        let visible = animateLayer.getVisible()
        animateLayer.setVisible(!visible)
    }

    function stopAnimate(){
        animateLayer.stop()
    }

    function starAnimate(){
        animateLayer.start()
    }

    function destroyAnimate(){
        animateLayer.destroy()
    }



    var animateLayer = null

    function initPage() {
        let paths = []
        for (let i = 1; i < 31; i++) {
            paths.push('assets/flow/' + i + '.png')
        }
        animateLayer = new egisV2.layer.AnimateLayer(map, {
            imgPathList: paths
        })
        animateLayer.render()

        let lineDatas = [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'coordinates':
                        [
                            [
                                [118.19684094526441, 24.524179458309092],
                                [118.20184666772139, 24.468541613793292],
                                [118.15876169942943, 24.429971132472502]
                            ],
                            [
                                [118.19684094526441 + 0.1, 24.524179458309092],
                                [118.20184666772139 + 0.1, 24.468541613793292],
                                [118.15876169942943 + 0.1, 24.429971132472502]
                            ]

                        ]
                    ,
                    'type': 'MultiLineString'
                }
            }
        ]

        for (let i = 0; i < 1000; i++) {
            lineDatas.push(
                {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'coordinates':
                            [
                                [
                                    [118.19 + i * 0.01, 24.524179458309092],
                                    [118.20 + i * 0.01, 24.468541613793292],
                                    [118.15 + i * 0.01, 24.429971132472502]
                                ]
                            ]
                        ,
                        'type': 'MultiLineString'
                    }
                }
            )
        }

        animateLayer.setDatas(lineDatas)

        animateLayer.start()
    }


    window.onload = function () {
        loadGeoMap(initPage)
    }

</script>
